<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>昨日头条</title>
    <link rel="stylesheet" href="static/index.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="static/jquery.min.js"></script>
    <script src="layui/layui.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
    <script src="static/summernote-zh-CN.js"></script>
    <!-- <script src="static/js.cookie.min.js"></script> -->
    <script src="static/xm-select.js"></script>
</head>

<body>
    <div class="content">
        <h1 class="title">昨日头条</h1>
        <div class="layui-clear">
            {if $logined}
            <button class="layui-btn" type="button" id="logout-btn">注销</button>
            <button type="button" class="layui-btn" id="add-layer-btn">
                <i class="layui-icon layui-icon-add-circle"></i>
            </button>
            {else}
            <button type="button" class="layui-btn" id="manage-layer-btn">管理</button>
            {/if}
            <div class="form">
                <button type="button" class="layui-btn fr search-btn" id="search-btn">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
                <input type="text" name="keyword" class="fr search-input" placeholder="搜索" id="search-key">
            </div>
            <div id="search-box" class="fr">
                <div id="search"></div>
            </div>
        </div>

        <div class="table">
            <table class="layui-table" lay-skin="line">
                <colgroup>
                    <col width="35%">
                    <col width="25%">
                    <col width="25%">
                </colgroup>
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $rows as $row }
                    <tr>
                        <td>
                            <a target="_blank" href="index.php/article?id={$row.id}">{$row.title}</a>
                        </td>
                        <td>{$row.ts}</td>
                        <td>
                            {if $logined == 'null'}
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-warm update-layer-btn" onclick="updateLayer({$row})">
                                <i class="layui-icon layui-icon-edit"></i>
                            </button>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger delete-layer-btn" onclick="deleteLayer('{$row.id}')">
                                <i class="layui-icon layui-icon-delete"></i>
                            </button>
                            {/if}
                        </td>
                    </tr>
                    {/foreach}
                </tbody>
            </table>
        </div>

        <div id="page">
            <div id="test1"></div>
        </div>

    </div>

    <div id="manage-layer" style="display: none;">
        <div class="content">
            <h1 class="title">登录</h1>
            <form method="post" action="index.php/login">
                <input type="text" required value="admin" name="username">
                <input type="password" required value="admin" name="password">
                <button type="submit" class="layui-btn" id="manage-btn">登录</button>
            </form>
        </div>
    </div>

    <div id="save-layer" style="display: none;">
        <div class="content">
            <h1 class="title" id="save-h1">保存</h1>
            <div class="form">
                <div>
                    <span>标题： </span>
                    <input type="text" required name="title" id="save-title">
                </div>
                <div>
                    <span>日期： </span>
                    <input type="text" required name="ts" id="save-ts">
                </div>
                <div>
                    <span>内容： </span>
                    <div id="summernote"></div>
                </div>
                <button class="layui-btn" id="save-submit">提交</button>
            </div>
        </div>
    </div>

    <script>
        var pk
        var laypage = layui.laypage;
        let keyword = getUrlParam('keyword')
        laypage.render({
            elem: 'test1',
            count: "{$count}",
            limit: "{$limit}",
            curr: "{$page}",
            jump: function(obj, first) {
                if (!first) {
                    var curr_page = obj.curr;
                    if (!keyword) {
                        window.location.href = `index.php?page=${obj.curr}`
                    } else {
                        window.location.href = `index.php?keyword=${keyword}&selectArr=${selectArr}&page=${obj.curr}`
                    }

                }
            }
        })

        $('#manage-layer-btn').click(function() {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 1,
                shadeClose: false,
                skin: 'yourclass',
                content: $("#manage-layer")
            });
        })

        $('#logout-btn').click(function() {
            window.location.href = "index.php/logout";
        })

        $('#summernote').summernote({
            lang: "zh-CN",
            placeholder: '',
            tabsize: 2,
            height: 300,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ]
        });

        $('#add-layer-btn').click(function() {
            $('#save-h1').text('添加')
            layer.open({
                type: 1,
                title: false,
                closeBtn: 1,
                shadeClose: false,
                skin: 'yourclass',
                content: $("#save-layer")
            });
        })

        function clearLayer() {
            $('#save-title').val('')
            $('#save-ts').val('')
            $('#summernote').summernote('code', '');
        }

        function updateLayer(data) {
            pk = data.id
            $('#save-h1').text('修改')
            $('#save-title').val(data.title)
            $('#save-ts').val(data.ts)
            $('#summernote').summernote('code', data.content)
            layer.open({
                type: 1,
                title: false,
                closeBtn: 1,
                shadeClose: false,
                skin: 'yourclass',
                content: $("#save-layer"),
                cancel: function() {
                    clearLayer()
                }
            })
        };

        function deleteLayer(id) {
            layer.confirm('是否删除？', {
                btn: ['提交']
            }, function() {
                deleteSubmit(id)
            });
        }

        $('#save-submit').click(function() {
            let title = $('#save-title').val()
            let ts = $('#save-ts').val()
            let content = $('#summernote').summernote('code');
            let data = {
                'title': title,
                'ts': ts,
                'content': content
            }

            if (title && ts && content) {
                let h1 = $('#save-h1').text()
                if (h1 == '添加') {
                    addSubmit(data)
                } else if (h1 == '修改') {
                    updateSubmit(data)
                }

            } else {
                layer.msg('请填写完整');
            }
        })

        function addSubmit(data) {
            $.ajax({
                type: "post",
                url: "index.php/api/add",
                data: data,
                success: function(res) {
                    if (res == 200) {
                        window.location.reload()
                    }
                }
            })
        }

        function updateSubmit(data) {
            data.id = pk
            $.ajax({
                type: "post",
                url: `index.php/api/update`,
                data: data,
                success: function(res) {
                    if (res == 200) {
                        window.location.reload()
                    }
                }
            })
        }

        function deleteSubmit(id) {
            $.ajax({
                type: "post",
                url: "index.php/api/delete",
                data: {
                    id: id
                },
                success: function(res) {
                    console.log(res, typeof res)
                    if (res == 200) {
                        layer.msg('成功', {
                            icon: 1
                        })
                        window.location.reload()
                    }
                }
            })
        }

        function getUrlParam(name, url) {
            let qs = arguments[1] || location.search.length > 0 ? location.search.substring(1) : '',
                args = {};
            let searchParams = new URLSearchParams(qs);
            return searchParams.get(name) ? searchParams.get(name) : '';
        };

        let demo1_title = {
            name: '标题',
            value: 'title',
            selected: true
        }
        let demo1_content = {
            name: '内容',
            value: 'content',
        }
        var selectArr = getUrlParam('selectArr')
        let exist = selectArr.indexOf('content')
        if (exist != -1) {
            demo1_content.selected = true
        }
        var demo1 = xmSelect.render({
            el: '#search',
            data: [demo1_title, demo1_content],
        })

        function search() {
            let selectArr = demo1.getValue('valueStr')
            let keyword = $('#search-key').val()
            if (keyword && selectArr) {
                window.location.href = `index.php?keyword=${keyword}&selectArr=${selectArr}`
            }
        }

        $('#search-btn').click(function() {
            search()
        })

        $('#search-key').keydown(function(event) {
            if (event.keyCode == 13) {
                search()
            }
        })
    </script>


</body>

</html>